<template>
  <div>
    <div class="box">
      <div class="header">
        <el-form ref="form" :model="form" label-width="100px">
          <el-row>
            <el-col :span="24" :md="12">
              <el-form-item label="时间类型">
                <el-select
                  v-model="form.timeType"
                  style="width: 30%; padding-right: 20px"
                  placeholder="请选择时间类型"
                >
                  <el-option label="账单生产日期" value="time" />
                </el-select>
                <el-date-picker
                  v-model="form.selectedDate"
                  style="width: 70%"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :md="6">
              <el-form-item label="总部类别">
                <el-select
                  v-model="form.claimTypeOne"
                  style="width: 100%"
                  placeholder="请选择总部类别"
                  @change="ClaimTypeOneChange"
                >
                  <el-option
                    v-for="item in ClaimTypeOneList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :md="6">
              <el-form-item label="二级类别">
                <el-select
                  v-model="form.claimTypeTwo"
                  style="width: 100%"
                  placeholder="请选择二级类别"
                >
                  <el-option
                    v-for="item in ActiveClaimTypeTwoList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="block">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="title">赔受款统计</div>
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <div class="liLittle" style="margin-right: 20px">
            <div class="f-row">
              <div class="littbox">
                <span>{{ ul.title }}</span>

                <span class="amount">￥{{ ul.amount }}</span>
                <span>涉及单量 {{ ul.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="liLittle">
            <div class="f-row">
              <div class="littbox">
                <span>{{ ul2.title }}</span>
                <span class="amount">￥{{ ul2.amount }}</span>
                <span>涉及单量 {{ ul2.num }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="mytabs">
        <el-tabs v-model="activeType" @tab-click="handleClick">
          <el-tab-pane label="我投诉的" :name="'1'" />
          <el-tab-pane label="投诉我的" :name="'2'" />
          <el-row type="flex" justify="space-between">
            <el-col :span="24">
              <el-table
                v-if="tableData.length != 0"
                id="table1"
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column
                  v-for="(column, index) in tableColumns"
                  :key="index"
                  :prop="column.fields"
                  :label="column.translate"
                  :width="setWidth(column)"
                  :align="'center'"
                />
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="details(scope.row)"
                    >详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div class="block">
            <el-pagination
              :current-page="form.currentPage"
              :page-sizes="[2, 10, 50, 100, 200, 500, 1000]"
              :page-size="pageDate.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="sizeChange"
              @current-change="currentChange"
            />
          </div>
        </el-tabs>
        <div class="exportPane">
          <el-button
            :disabled="tableData.length == 0"
            icon="el-icon-upload2"
            @click="exportCenter"
          >导出中心</el-button>
          <el-button
            :disabled="tableData.length == 0"
            @click="exportTable"
          >导出</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible">
      <commonForm :form-data="formData" :form-config="formConfig" />
    </el-dialog>
  </div>
</template>
<script>
let that = ''
import {
  settlementAjax,
  getClaimsBillList,
  getClaimTypeOne,
  getClaimTypeByParentId,
  getClaimTypeTwo
} from '@/api/customer.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import dayjs from 'dayjs'
import commonForm from '@/components/common/Form.vue'
export default {
  components: {
    commonForm
  },
  data() {
    return {
      form: {
        timeType: 'time',
        claimTypeOne: '',
        claimTypeTwo: '',
        type: [],
        selectedDate: [],
        currentPage: 1
      },
      ul: {
        title: '投诉赔偿款',
        amount: 0,
        num: 0
      },
      ul2: {
        title: '被投诉赔偿',
        amount: 0,
        num: 0
      },
      pageDate: {
        pageNum: 1,
        pageSize: 2
      },
      current: 1, // 当前页
      pages: 0, // 总页数
      total: 0, // 总条数
      ClaimTypeOneList: [], // 一级大类下拉
      ClaimTypeTwoByOne: [], // 根据一级产生的二级下拉
      ClaimTypeTwoList: [], // 二级小类下拉
      ActiveClaimTypeTwoList: [], // 当前二级类下拉

      tableData: [],
      activeType: '1', // 当前激活的类型
      TypeDict: ['我投诉的', '投诉我的'],

      dialogVisible: false,
      formData: {}, // 表单数据
      formConfig: {} // 表单配置
    }
  },
  created() {
    that = this
    const endDate = dayjs()
    const startDate = endDate.subtract(6, 'day')
    that.form.selectedDate = [
      startDate.format('YYYY-MM-DD'),
      endDate.format('YYYY-MM-DD')
    ]
    that.getAjax()
    this.getList()
  },
  methods: {
    details() {
      // that.dialogVisible = true
    },
    ClaimTypeOneChange(e) {
      // 一类变化时清空二类下拉与选项
      that.ActiveClaimTypeTwoList = []
      that.form.claimTypeTwo = ''
      getClaimTypeByParentId(e)
        .then((res) => {
          if (res.code === 200) {
            that.ClaimTypeTwoByOne = res.data
            that.ActiveClaimTypeTwoList = res.data
            that.form.claimTypeTwo = ''
          }
        })
        // .catch((err) => {})
    },
    getList() {
      getClaimTypeOne()
        .then((res) => {
          if (res.code === 200) {
            that.ClaimTypeOneList = res.data
          }
        })
        // .catch((err) => {})
      getClaimTypeTwo()
        .then((res) => {
          if (res.code === 200) {
            that.ClaimTypeTwoList = res.data
            that.ActiveClaimTypeTwoList = res.data
          }
        })
        // .catch((err) => {})
    },
    resetForm() {
      that.pageDate.pageNum = 1
      that.form = {
        timeType: 'time',
        claimTypeOne: '',
        claimTypeTwo: '',
        type: [],
        currentPage: 1
      }
      // 重置后恢复二级类下拉
      that.ActiveClaimTypeTwoList = that.ClaimTypeTwoList
      const endDate = dayjs()
      const startDate = endDate.subtract(6, 'day')
      that.form.selectedDate = [
        startDate.format('YYYY-MM-DD'),
        endDate.format('YYYY-MM-DD')
      ]
      that.getAjax()
    },
    onSubmit() {
      that.pageDate.pageNum = 1
      that.getAjax()
    },
    // 理赔账单
    getAjax() {
      const data = {
        claimTypeId: that.form.claimTypeTwo, // 二级类型id
        startTime: that.form.selectedDate ? that.form.selectedDate[0] : '', // 开始时间
        endTime: that.form.selectedDate ? that.form.selectedDate[1] : '', // 结束时间
        pageDate: that.pageDate,
        type: that.activeType
      }
      // 去除无效字段
      for (const i in data) {
        if (!data[i]) delete data[i]
      }
      // 统计数据
      settlementAjax(data).then((res) => {
        if (res.code === 200) {
          that.ul.amount = res.data.list[0].myComplaintAmount || 0
          that.ul.num = res.data.list[0].myComplaintVolume || 0

          that.ul2.amount = res.data.list[0].againstMeComplaintAmount || 0
          that.ul2.num = res.data.list[0].againstMeComplaintVolume || 0
        }
      })
      // 列表数据
      getClaimsBillList(data)
        .then((res) => {
          if (res.code === 200) {
            that.tableColumns = res.data.fields
            that.tableData = res.data.list.data
            that.current = res.data.list.current
            that.pages = res.data.list.pages
            that.total = res.data.list.total
          } else {
            that.resetTable()
          }
        })
        // .catch((err) => {
        //   that.resetTable()
        // })
    },
    resetTable() {
      that.tableData = []
      that.current = 1
      that.pages = 0
      that.total = 0
    },
    sizeChange(e) {
      console.log(e)
      that.pageDate.pageSize = e
      that.getAjax()
    },
    currentChange(e) {
      console.log(e)
      that.pageDate.pageNum = e
      that.getAjax()
    },
    handleClick(tab, event) {
      console.log(tab, event)
      that.activeType = tab.name
      // 选择某一维度,清空其他维度的查询条件
      that.form = {
        ...that.form
      }
      that.getAjax()
    },
    setWidth(e) {
      return 80 + e.translate.length * 15
    },
    exportCenter() {},
    exportTable() {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#table1'),
        xlsxParam
      )
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      const typeName = that.TypeDict[parseInt(that.activeType) - 1]
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          '工单处理质量统计-' + typeName + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.flex {
  display: flex;
  // justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  font-weight: bold;
}
.liLittle {
  border: 1px solid #ddd;
  border-radius: 3px;
  height: 150px;
  padding: 20px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
}
.liLittle > span {
  font-size: 24px;
}
.f-row {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.littbox {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  height: 100px;
  color: #666;
}
.amount {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-left: -4px;
}
.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding: 20px 0 0;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.block {
  display: flex;
  justify-content: flex-end;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.mytabs {
  position: relative;
}
.exportPane {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  button {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
}
</style>
